<template>
<div class="personlist-root">
  <div class="title">相关人物</div>
  <div class="block">
    <div class="bar">
      <router-link to="topic">
        <img src="../assets/close.png">
      </router-link>
    </div>
    <div class="wrap">
      <div class="content innerscr">
        <Person v-for="item in avs" class="avatar" :data="item"></Person>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import Person from './Topic/Person'

export default {
  name: 'personlist',
  components: {Person},
  data(){
    return {
      avs: []
    }
  },
  mounted(){
    fetch('/static/data-personlist.json').then(r=>r.json()).then(data=>{
      let out = []
      for(let i = 0; i < 7; i++){
        out = out.concat(data)
      }
      this.avs = out
    })
  }
}
</script>

<style scoped lang="stylus">
.block
  position absolute
  background rgba(0,0,0,.3)
  top 130px
  left 320px
  right 320px
  bottom 125px
  >.bar
    display flex
    justify-content flex-end
    padding 20px
    margin-bottom 12px
  >.wrap
    padding 0 86px
    >.content
      overflow auto
      height 610px
      display flex
      flex-wrap wrap
      >.avatar
        margin-right 37px
        width 137px
        margin-bottom 27px
        &:nth-child(6n)
          margin-right 0

</style>